<!DOCTYPE html>
<html>

<head>
    <title>民主评议</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            transition: transform 0.3s ease; /* 添加过渡效果，使缩放更平滑 */
        }

        #qrcode-container {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            position: relative;
            text-align: center;
			float: right;
			/* margin-top: 50px; */
			/* margin-right: 10px; */
        }

        #qrcode {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            position: relative;
        }

        #logo {
            width: 60px;
            height: 60px;
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
            border: 2px solid #ffffff1a;
            background-color: rgba(255, 255, 255, 0);
        }

      .zoom-buttons {
            text-align: center;
            margin-top: 20px;
        }

        button {
            padding: 8px 16px;
            margin: 0 10px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: white;
            font-size: 14px;
        }

        button:hover {
            background-color: #0056b3;
        }
		/* .father{

		} */
		.left{
			float: left;
			width: 50%;
			position: relative;
		}
		.right{
			float: left;
			width: 15%;
			margin-top: 120px;
			padding-left: 10px;
		}
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            let scale = 1; // 初始缩放比例
            const minScale = 0.5; // 最小缩放比例
            const maxScale = 3; // 最大缩放比例
            const step = 0.1; // 每次缩放的步长

            loadQRCode();
            setInterval(function () {
                console.log("==============");
                loadQRCode();
            }, 10000); // 10000毫秒 = 10秒

            function loadQRCode() {
                $('#qrcode').html("");
                var key = "";
                $.ajax({
                    url: 'http://192.168.0.196:18760/taskDemocraticReview/anyTenant/getDemocraticReviewQRCodeURL', // 请求的URL
                    type: 'GET', // 请求类型
                    async: false, // 设置为同步请求
                    success: function (response) {
                        // 请求成功时的回调函数
                        key = response.data;
                    }
                });
                var url = "http://192.168.0.196:18760/taskDemocraticReview/anyTenant/openDemocraticReviewIndex?key=" + key;

                // 生成二维码
                $('#qrcode').qrcode({
                    render: "canvas", // 使用canvas方式绘制，也可以替换为table
                    width: 200,
                    height: 200,
                    text: encodeURI(url), // 对包含中文字符的链接进行转码，否则无需转码
                });

                $('#key').html("此二维码经过加密处理，拍照转发场外人员即刻失效，需重新扫码！");
            }

            // 放大按钮点击事件处理函数
            $('#zoom-in').click(function () {
                if (scale < maxScale) {
                    scale += step;
                    $('body').css('transform', `scale(${scale})`);
                }
            });

            // 缩小按钮点击事件处理函数
            $('#zoom-out').click(function () {
                if (scale > minScale) {
                    scale -= step;
                    $('body').css('transform', `scale(${scale})`);
                }
            });
        });
    </script>
</head>

<body>
    <div class="father">
		<div class="left">
			<div id="qrcode-container">
				<div id="qrcode">
				</div>
				<img id="logo" src="./img/logo-1.png" alt="logo">
				<div></div>
			</div>
		</div>
		<div class="right">
			<p id="key"></p>
		    <div class="zoom-buttons">
		    	<button id="zoom-in">放大</button>
		    	<button id="zoom-out">缩小</button>
		    </div>
		</div>
		<!-- <div id="url"></div> -->
	</div>
</body>

</html>